<template>
    <!-- 主内容区域修改 -->
    <main class="flex-1 flex flex-col p-8 overflow-auto w-full">
      <div class="max-w-7xl mx-auto w-full"> 
        <!-- 科目选择区域 -->
        <div class="grid grid-cols-2 gap-6 w-full">
          <!-- 数据结构卡片 -->
          <div class="bg-gray-700 rounded-xl shadow-xl p-8 flex flex-col items-center justify-center transform hover:scale-105 hover:shadow-purple-500/30 transition-all duration-300 cursor-pointer subject-card border border-gray-600">
            <img alt="数据结构封面" class="w-full h-48 object-cover rounded-lg mb-6 border border-gray-500" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/10b1b98be190c88f6ebb753e62e19288.png" />
            <h3 class="text-2xl font-extrabold text-blue-400 mb-3">数据结构</h3>
            <p class="text-gray-400 text-center">算法之美，优化计算的艺术</p>
          </div>
          <!-- 计算机组成原理卡片 -->
          <div class="bg-gray-700 rounded-xl shadow-xl p-8 flex flex-col items-center justify-center transform hover:scale-105 hover:shadow-green-500/30 transition-all duration-300 cursor-pointer subject-card border border-gray-600">
            <img alt="计算机组成原理封面" class="w-full h-48 object-cover rounded-lg mb-6 border border-gray-500" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/738e712334d141b5f7eb4b02d1ffa59e.png" />
            <h3 class="text-2xl font-extrabold text-green-400 mb-3">
              计算机组成原理
            </h3>
            <p class="text-gray-400 text-center">探索计算机硬件的奥秘</p>
          </div>
          <!-- 操作系统卡片 -->
          <div class="bg-gray-700 rounded-xl shadow-xl p-8 flex flex-col items-center justify-center transform hover:scale-105 hover:shadow-red-500/30 transition-all duration-300 cursor-pointer subject-card border border-gray-600">
            <img alt="操作系统封面" class="w-full h-48 object-cover rounded-lg mb-6 border border-gray-500" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/6943bc60e57148090bf05e7c10588e99.png" />
            <h3 class="text-2xl font-extrabold text-red-400 mb-3">操作系统</h3>
            <p class="text-gray-400 text-center">驾驭系统资源，管理程序运行</p>
          </div>
          <!-- 计算机网络卡片 -->
          <div class="bg-gray-700 rounded-xl shadow-xl p-8 flex flex-col items-center justify-center transform hover:scale-105 hover:shadow-yellow-500/30 transition-all duration-300 cursor-pointer subject-card border border-gray-600">
            <img alt="计算机网络封面" class="w-full h-48 object-cover rounded-lg mb-6 border border-gray-500" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/83a79257ccdba157e62fa5fa69fe1575.png" />
            <h3 class="text-2xl font-extrabold text-yellow-400 mb-3">
              计算机网络
            </h3>
            <p class="text-gray-400 text-center">连接世界，理解网络通信</p>
          </div>
        </div>
      </div>
    </main>
</template>
<script setup>
</script>
<style scoped>
</style>